<script setup lang="ts">
import chats1 from './components/base-charts/src/base-charts.vue'
import type { EChartsOption } from 'echarts'
import { reactive, ref } from 'vue'
import setps from './components/mysetps/index.vue'
const pieOption: EChartsOption = reactive({
  title: {
    text: '禅城区工单数量统计',
    left: '0',
    top: '10px',
    textStyle: {
      fontSize: 16, // 主标题字号
      color: '#333',
    },
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },

  grid: {
    left: '3%',
    right: '4%',
    top: '20%',
    bottom: '3%',
    containLabel: true,
  },
  xAxis: [
    {
      type: 'category',
      data: [
        '一月',
        '二月',
        '三月',
        '四月',
        '五月',
        '六月',
        '七月',
        '八月',
        '九月',
        '十月',
        '十一月',
        '十二月',
      ],
      axisLabel: {
        fontSize: 12, // 刻度文字大小
        color: '#999', // 顺便改颜色
      },
      axisLine: {
        lineStyle: {
          color: '#eee',
        },
      },
      axisTick: {
        alignWithLabel: true,
      },
    },
  ],
  yAxis: [
    {
      type: 'value',
      axisLabel: {
        fontSize: 12, // 刻度文字大小
        color: '#999', // 顺便改颜色
      },
    },
  ],
  series: [
    {
      type: 'bar',
      barWidth: '20px',
      data: [10, 52, 200, 334, 390, 330, 220, 420, 150, 230, 280, 170],
      itemStyle: {
        borderRadius: [3, 3, 3, 3],
        color: '#1e5eff',
      },
    },
  ],
})

const bingOption: EChartsOption = reactive({
  title: {
    text: '工单分类占比',
    left: 'center',
  },
  tooltip: {
    trigger: 'item',
  },
  legend: {
    orient: 'vertical',
    left: 'right',
    top: 'center',
  },
  grid: {
    left: '50%',
    right: '50%',
    top: '40%',
    containLabel: true,
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      selectedMode: 'single', // single 或 multiple
      selectedOffset: 10,
      data: [
        { value: 1048, name: '噪音污染' },
        { value: 735, name: '违规停车' },
        { value: 580, name: '服务纠纷' },
        { value: 484, name: '公共设施' },
        { value: 300, name: '虚假宣传等其它' },
        { value: 300, name: '食品安全' },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
      label: {
        formatter: '{d}%',
      },
    },
  ],
})
const modeStyle = {
  width: '100%',
  height: '300px',
}
const steps = reactive([
  { title: '暂存', icon: '' },
  { title: '待领取', icon: '' },
  { title: '待派发', icon: '' },
  { title: '待受理', icon: '' },
  { title: '处理中', icon: '' },
  { title: '办理审核', icon: '' },
  { title: '已办结', icon: '' },
  { title: '已回访', icon: '' },
  { title: '已归档', icon: '' },
])
const current = ref(4)
</script>

<template>
  <div class="main">
    <div class="card">
      <chats1 :options="pieOption" type="bar" :style="modeStyle">
        <template #right>
          <div class="right">
            <a-dropdown>
              <a class="ant-dropdown-link" @click.prevent>
                Hover me
                <DownOutlined />
              </a>
              <template #overlay>
                <a-menu>
                  <a-menu-item>
                    <a href="javascript:;">最近12个月</a>
                  </a-menu-item>
                  <a-menu-item>
                    <a href="javascript:;">最近1年</a>
                  </a-menu-item>
                  <a-menu-item>
                    <a href="javascript:;">最近1个月</a>
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </div>
        </template>
      </chats1>
    </div>
    <div class="under">
      <div class="mcard">
        <chats1 :options="bingOption" type="pie" :style="modeStyle">
          <template #right>
            <div class="right">2222</div>
          </template>
        </chats1>
      </div>
      <div class="mcard"></div>
    </div>
  </div>
</template>

<style scoped>
:deep(.ant-steps-item::after) {
  width: 40px;
  height: 40px;
}
:deep(.ant-steps-icon) {
  font-size: 20px;
}
.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.card {
  width: 80vw;
  margin: 20px;
  padding: 20px;
  background-color: #fff;
  border: 1px solid red;
  position: relative;
  border-radius: 20px;
  box-sizing: border-box;
}
.under {
  width: 80vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mcard {
  width: 39vw;
  padding: 20px;
  background-color: #fff;
  border: 1px solid red;
  position: relative;
  border-radius: 20px;
  box-sizing: border-box;
}
.right {
  position: absolute;
  right: 40px;
  top: 20px;
  z-index: 100;
}
</style>
